import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
import { BulbOutlined, DeleteOutlined } from '@ant-design/icons';
import './FastAdd.css';

const FastAdd: React.FC = () => {
  const [formList, setFormList] = useState<number[]>([0,1,2]);
  const [form] = Form.useForm();

  const handleAdd = () => {
    setFormList([...formList, formList.length]);
  };

  const handleRemove = (index: number) => {
    setFormList(formList.filter((_, i) => i !== index));
  };

  const handleSubmit = () => {
    form.validateFields()
      .then(values => {
        console.log('Form values:', values);
      })
      .catch(info => {
        console.error('Validate Failed:', info);
      });
  };

  return (
    <div className="fastadd-container">
      <h2>快速添加</h2>
      <p className="fastadd-tips">
        <span><BulbOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} /> Tips:</span> 添加成员账号，成员通过用户名和初始密码登录系统，修改初始密码后进入组织
      </p>
      <p className='fast-title'>
        登录用户名
      </p>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        {formList.map((_, index) => (
          <div key={index} className="fastadd-input-group">
            <Form.Item name={`username${index}`} rules={[{ required: true, message: '请输入登录用户名' }]}>
              <Input placeholder="请输入登录用户名" style={{ width: '41.875rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem', marginBottom: '-0.625rem' }} />
            </Form.Item>
            <DeleteOutlined className="fastadd-remove-button" onClick={() => handleRemove(index)} />
          </div>
        ))}
        <Button onClick={handleAdd} className="fastadd-add-button">
          + 添加
        </Button>
        <div className="fastadd-footer">
          <Form.Item>
            <Button className="fastadd-submit-button" type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
};

export default FastAdd;
